<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="content-language" content="en" />

	<title>Nette\Forms example 4 | Nette Framework</title>

	<style type="text/css">
	<!--
	body {
		font-family: "Trebuchet MS", "Geneva CE", lucida, sans-serif;
	}

	.required {
		font-weight: bold;
	}

	.error {
		color: red;
	}

	input.text {
		border: 1px solid #78bd3f;
		padding: 3px;
		color: black;
		background: white;
	}

	input.button {
		font-size: 120%;
	}

	dt, dd {
		padding: .5em 1em;
	}

	#form {
		width: 550px;
	}

	#form h3 {
		background: #78bd3f;
		color: white;
		margin: 0;
		padding: .1em 1em;
		font-size: 100%;
		font-weight: normal;
		clear: both;
	}

	#form dl {
		background: #F8F8F8;
		margin: 0;
	}

	#form dt {
		text-align: right;
		font-weight: normal;
		float: left;
		width: 10em;
		clear: both;
	}

	#form dd {
		margin: 0;
		padding-left: 10em;
		display: block;
	}

	#form dd ul {
		list-style: none;
		font-size: 90%;
	}

	#form dd.odd {
		background: #EEE;
	}
	-->
	</style>
</head>

<body>
	<h1>Nette\Forms example 4</h1>

	<form action="" method="post" enctype="multipart/form-data" onsubmit="return validate(this)">
<div id="form">

<h3>Personal data</h3>

<dl>

	<dt><label class="required" for="frm-name">Your name:</label></dt>

	<dd><input type="text" size="35" class="text" name="name" id="frm-name" value="John Doe" /> •</dd>



	<dt><label class="required" for="frm-age">Your age:</label></dt>

	<dd class="odd"><input type="text" size="5" class="text" name="age" id="frm-age" value="9.9" /> •

<ul class="error">
	<li>Age must be numeric value</li>
</ul>
</dd>



	<dt><label onclick="return false" for="frm-gender">Your gender:</label></dt>

	<dd><select size="2" onfocus="this.onmousewheel=function(){return false}" name="gender" id="frm-gender"><option style="color: #248bd3">male</option><option style="color: #e948d4">female</option></select></dd>



	<dt><label for="frm-email">E-mail:</label></dt>

	<dd class="odd"><input type="text" size="35" class="text" name="email" id="frm-email" value="&#64;" /></dd>

</dl>



<h3>Shipping address</h3>

<dl>

	<dt></dt>

	<dd><input type="checkbox" onclick="toggle(this)" name="send" id="frm-send" /><label for="frm-send">Ship to address</label></dd>

</dl>

<div id="sendBox">
<dl>

	<dt><label for="frm-street">Street:</label></dt>

	<dd class="odd"><input type="text" size="35" class="text" name="street" id="frm-street" value="" /></dd>



	<dt><label for="frm-city">City:</label></dt>

	<dd><input type="text" size="35" class="text" name="city" id="frm-city" value="Troubsko" /></dd>



	<dt><label onclick="return false" for="frm-country">Country:</label></dt>

	<dd class="odd"><select onfocus="this.onmousewheel=function(){return false}" name="country" id="frm-country"><option value="0">Select your country</option><optgroup label="Europe"><option value="CZ">Czech Republic</option><option value="FR">France</option><option value="DE">Germany</option><option value="GR">Greece</option><option value="HU">Hungary</option><option value="IE">Ireland</option><option value="IT">Italy</option><option value="NL">Netherlands</option><option value="PL">Poland</option><option value="SK">Slovakia</option><option value="ES">Spain</option><option value="CH">Switzerland</option><option value="UA">Ukraine</option><option value="GB">United Kingdom</option></optgroup><option value="AU">Australia</option><option value="CA">Canada</option><option value="EG">Egypt</option><option value="JP">Japan</option><option value="US">United States</option><option value="?">other</option></select></dd>

</dl>
</div>



<h3>Your account</h3>

<dl>

	<dt><label class="required" for="frm-password">Choose password:</label></dt>

	<dd><input type="password" size="20" class="text" name="password" id="frm-password" value="" /> • <small>(at least 3 characters)</small>

<ul class="error">
	<li>The password is too short: it must be at least 3 characters</li>
</ul>
</dd>



	<dt><label for="frm-password2">Reenter password:</label></dt>

	<dd class="odd"><input type="password" size="20" class="text" name="password2" id="frm-password2" value="" /></dd>



	<dt><label for="frm-avatar">Picture:</label></dt>

	<dd><input type="file" class="text" name="avatar" id="frm-avatar" /></dd>



	<dt><label for="frm-note">Comment:</label></dt>

	<dd class="odd"><textarea cols="30" rows="5" name="note" id="frm-note"></textarea></dd>

</dl>



<dl>

	<dt></dt>

	<dd><input type="submit" class="button" name="submit1" id="frm-submit1" value="Send" /></dd>

</dl>

</div>
<div><input type="hidden" name="userid" id="frm-userid" value="231" /></div>
</form>
<script type="text/javascript">
/* <![CDATA[ */
function validate(sender) {
	var element, message, res;
	do {
	element = document.getElementById("frm-name");
	var val = element.value.replace(/^\s+|\s+$/g, '');
	res = val!='' && val!="";
	if (!res) { message = "Enter your name"; if (element) element.focus(); alert(message); return false; }
	} while(0);

	do {
	element = document.getElementById("frm-age");
	var val = element.value.replace(/^\s+|\s+$/g, '');
	res = val!='' && val!="";
	if (!res) { message = "Enter your age"; if (element) element.focus(); alert(message); return false; }
	element = document.getElementById("frm-age");
	var val = element.value.replace(/^\s+|\s+$/g, '');
	res = /^-?[0-9]+$/.test(val);
	if (!res) { message = "Age must be numeric value"; if (element) element.focus(); alert(message); return false; }
	element = document.getElementById("frm-age");
	var val = element.value.replace(/^\s+|\s+$/g, '');
	res = parseFloat(val)>=10 && parseFloat(val)<=100;
	if (!res) { message = "Age must be in range from 10 to 100"; if (element) element.focus(); alert(message); return false; }
	} while(0);

	do {
	element = document.getElementById("frm-email");
	var val = element.value.replace(/^\s+|\s+$/g, '');
	res = val!='' && val!="@";
	if (res) {
		element = document.getElementById("frm-email");
		var val = element.value.replace(/^\s+|\s+$/g, '');
		res = /^[^@\s]+@[^@\s]+\.[a-z]{2,10}$/i.test(val);
		if (!res) { message = "Incorrect E-mail Address"; if (element) element.focus(); alert(message); return false; }
	}
	} while(0);

	do {
	element = document.getElementById("frm-send");
	var val = element.checked;
	res = (val==true);
	if (res) {
		element = document.getElementById("frm-city");
		var val = element.value.replace(/^\s+|\s+$/g, '');
		res = val!='' && val!="";
		if (!res) { message = "Enter your shipping address"; if (element) element.focus(); alert(message); return false; }
	}
	} while(0);

	do {
	element = document.getElementById("frm-send");
	var val = element.checked;
	res = (val==true);
	if (res) {
		element = document.getElementById("frm-country");
		res = element.selectedIndex >= 1;
		if (!res) { message = "Select your country"; if (element) element.focus(); alert(message); return false; }
	}
	} while(0);

	do {
	element = document.getElementById("frm-password");
	var val = element.value.replace(/^\s+|\s+$/g, '');
	res = val!='' && val!="";
	if (!res) { message = "Choose your password"; if (element) element.focus(); alert(message); return false; }
	element = document.getElementById("frm-password");
	var val = element.value.replace(/^\s+|\s+$/g, '');
	res = val.length>=3;
	if (!res) { message = "The password is too short: it must be at least 3 characters"; if (element) element.focus(); alert(message); return false; }
	} while(0);

	do {
	element = document.getElementById("frm-password");
	var val = element.value.replace(/^\s+|\s+$/g, '');
	res = function(){
	element = document.getElementById("frm-password");
	var val = element.value.replace(/^\s+|\s+$/g, '');
	res = val!='' && val!="";
	if (!res) { return false; }
	element = document.getElementById("frm-password");
	var val = element.value.replace(/^\s+|\s+$/g, '');
	res = val.length>=3;
	if (!res) { return false; }
	return true; }();
	if (res) {
		element = document.getElementById("frm-password2");
		var val = element.value.replace(/^\s+|\s+$/g, '');
		res = val!='' && val!="";
		if (!res) { message = "Reenter your password"; if (element) element.focus(); alert(message); return false; }
		element = document.getElementById("frm-password2");
		var val = element.value.replace(/^\s+|\s+$/g, '');
		res = (val==function(){var element;element = document.getElementById("frm-password");
		var val = element.value.replace(/^\s+|\s+$/g, '');
		return val;}());
		if (!res) { message = "Passwords do not match"; if (element) element.focus(); alert(message); return false; }
	}
	} while(0);

	return true;
}

function toggle(sender) {
	var element, visible, res;
	visible = true; element = document.getElementById("frm-send");
	var val = element.checked;
	res = (val==true); visible = visible && res;
	element = document.getElementById('sendBox');
	if (element) element.style.display = visible ? "" : "none";
	
}

toggle(null);
/* ]]> */
</script>
</body>
</html>
